<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Chatbot</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <h1 class="mt-5 mb-3">Chatbot</h1>
      <div class="row">
        <div class="col-md-8">
          <div class="card">
            <div class="card-body" id="messages">
              <div class="alert alert-secondary" role="alert">
                Hello! How can I help you?
              </div>
            </div>
          </div>
          <form id="chat-form" class="mt-3">
            <div class="input-group">
              <input type="text" id="message-input" class="form-control" placeholder="Type your message...">
              <div class="input-group-append">
                <button type="submit" class="btn btn-primary">Send</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $(document).ready(function() {
        // Handle chat form submission
        $('#chat-form').submit(function(e) {
          e.preventDefault();
          var message = $('#message-input').val();
          sendMessage(message);
          $('#message-input').val('');
        });
      });

      // Send message to server and handle response
      function sendMessage(message) {
        $.ajax({
          type: 'POST',
          url: '/chat',
          contentType: 'application/json',
          data: JSON.stringify({'message': message}),
          success: function(response) {
            var messageHtml = '<div class="alert alert-secondary" role="alert">' + response.message + '</div>';
            $('#messages').append(messageHtml);
          },
          error: function(xhr, status, error) {
            alert('Error: ' + error.message);
          }
        });
      }
    </script>
  </body>
</html>
